<template>
  <el-card
    shadow="always"
    :body-style="{ padding: '20px' }"
    :style="{ marginTop: '20px' }"
  >
    <template #header>
      <el-button type="primary" size="default" icon="ele-Plus" @click="addSpu"
        >新增SPU</el-button
      >
    </template>

    <el-table :data="spuList" border stripe v-loading="loading">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="SPU名称" prop="spuName"> </el-table-column>
      <el-table-column label="SPU描述" prop="description"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-tooltip content="新增sku" placement="top" effect="dark">
            <el-button
              type="primary"
              size="small"
              icon="ele-Plus"
              @click="addSku(row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="修改spu" placement="top" effect="dark">
            <el-button
              type="warning"
              size="small"
              icon="ele-Edit"
              @click="editSpu(row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="sku列表" placement="top" effect="dark">
            <el-button
              type="info"
              size="small"
              icon="ele-Warning"
              @click="getSkuList(row.id)"
            ></el-button>
          </el-tooltip>
          <el-popconfirm title="你确定删除吗?" @confirm="delSpu(row.id)">
            <template #reference>
              <span :style="{ marginLeft: '10px' }">
                <el-tooltip content="删除spu" placement="top" effect="dark">
                  <el-button
                    type="danger"
                    size="small"
                    icon="ele-Delete"
                  ></el-button>
                </el-tooltip>
              </span>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 7, 9]"
      :total="totalNum"
      layout="prev, pager, next, total, sizes"
      background
      :style="{ marginTop: '20px' }"
    >
    </el-pagination>

    <!-- sku列表 -->
    <el-dialog title="SKU列表" width="60%" v-model="isShow">
      <template #footer>
        <el-table :data="skuList" border stripe>
          <el-table-column label="名称" prop="skuName"> </el-table-column>
          <el-table-column label="价格" prop="price"> </el-table-column>
          <el-table-column label="重量" prop="weight"> </el-table-column>
          <el-table-column label="默认图片">
            <template v-slot="{ row }">
              <img
                :src="row.skuDefaultImg"
                alt=""
                :style="{ height: '150px' }"
              />
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "SpuList",
});
</script>

<script setup lang="ts">
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";
import {
  reqSpuInfo,
  reqDeleteSpu,
  type spuInfoItemType,
  type spuInfoListType,
  reqGetSkuList,
  type skuListType,
} from "@/api/spu";
import { ElMessage } from "element-plus";
import useCategoryStore from "@/stores/category";

//定义一个枚举 代表组件状态
enum compStatus {
  SpuList,
  AddSpu,
  AddSku,
}

const emit = defineEmits<{
  (event: "changeStatus", status: number, row?: spuInfoItemType): void;
}>();

const categoryStore = useCategoryStore();
const { category3Id } = storeToRefs(categoryStore);

//初始化页码数据
const currentPage = ref(1);
const pageSize = ref(3);
const totalNum = ref(0);

//初始化列表数据
const spuList = ref<spuInfoListType>([]);

//初始化loading
const loading = ref(false);

//请求列表的函数封装
const getSpuList = async () => {
  if (!category3Id.value) return;

  try {
    loading.value = true;
    const result = await reqSpuInfo(
      currentPage.value,
      pageSize.value,
      category3Id.value!
    );
    loading.value = false;

    totalNum.value = result.total;
    spuList.value = result.records;
  } catch (e: any) {
    ElMessage.error("请求列表失败:" + e.message);
  }
};

//初始化及3级分类变动的时候进行渲染
watch(
  category3Id,
  () => {
    getSpuList();
  },
  {
    immediate: true,
  }
);

//监听页码的改变,重新发送请求
watch([currentPage, pageSize], () => {
  getSpuList();
});

//新增spu的事件回调函数
const addSpu = () => {
  emit("changeStatus", compStatus["AddSpu"]);
};

//修改spu的事件回调函数
const editSpu = (row: spuInfoItemType) => {
  emit("changeStatus", compStatus["AddSpu"], row);
};

//新增sku的事件回调函数
const addSku = (row: spuInfoItemType) => {
  emit("changeStatus", compStatus["AddSku"], row);
};
/**
 * 点击删除某个spu
 * @param id
 */
const delSpu = async (id: number) => {
  await reqDeleteSpu(id);
  getSpuList();
  ElMessage.success("删除成功");
};

/**
 * 点击获取sku列表
 */
const isShow = ref(false);
const skuList = ref<skuListType>([]);
const getSkuList = async (id: number) => {
  isShow.value = true;
  try {
    const res = await reqGetSkuList(id);
    console.log(res);
    skuList.value = res;
  } catch (error: any) {
    ElMessage.error("请求SKU列表失败:" + error.message);
  }
};
</script>

<style scoped></style>
